html, body { height: 100%; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
	
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	
a:link, a:visited, a:active { color: #333; text-decoration: none; outline:none; }
a:hover { text-decoration: none; color: #34742d; }


body { font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #555; background:#dbf5f3; margin:0;  }

h1, h2, h3, h4, p { margin:0 0 15px 0; padding:0; }
h1 { font-size:36px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; }
h2 { font-size:28px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; }
h3 { font-size:22px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; }
h4 { font-size:16px; font-weight:normal; font-family:arial, sans-serif; color:#333; padding:15px 0 0 0; }
p { line-height:1.5em }

.clr {clear:both; font-size:1px; height:1px; }

/* float clearing for IE6 */
* html .clearfix{ height: 1%; overflow: visible;}
/* float clearing for IE7 */
*+html .clearfix{ min-height: 1%;}
/* float clearing for everyone else */
.clearfix:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0;}

#main {  width:980px; margin:0 auto;  }
#content { padding:0px 20px;  background-color:transparent;}
#main2 {  width:100%; margin:0 auto; background-color:#6adbd8; min-height:536px; border:0px solid #F33;}
#content1 { display:inline;margin:0 auto; padding:0px 0px 10px 0px; border:0px solid #F33;}
#content2 { display:inline;margin:0 auto; padding:0px 0px 0px 0px; border:0px solid #F33;}

#content3 {margin:0 auto; padding:0px 20px; border:0px solid #F33; width:180px; background-color:#fff; float:right; display:inline-block;}
#container{ width:950px;margin:0 auto; padding-top:0px;}

footer { padding:15px 0; font-size:11px; text-align:center; color:#777 }
/**** ~~ sticky navigation ~~ ****/

.head_container { width:1000px; margin:0 auto;}
#top_wrapper { margin:0 0 0px 0;background: #dbf5f3 url(../images/header-bg.jpg) center top; background-repeat:no-repeat;}
#head_top { height:125px; padding:0px 0 0 0;}
#app_logo { background-image: url(../images/logo.png); width:438px; height:125px;}

.bar_container { width:1000px; margin:0 auto; }
#sticky_navigation_wrapper { width:100%; height:48px; border:solid 0px #F30;}
#sticky_navigation { width:100%; height:44px; background:url(../images/trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
#sticky_navigation ul { list-style:none; margin:0; padding:2px 2px 2px 5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 1px; padding:0 20px; height:40px; line-height:40px; font-size:17px; font-family: Verdana, Geneva, sans-serif, "微軟正黑體"; font-weight: lighter; color:#ddd; background:#484848; cursor: pointer letter-spacing: 2px;}
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#6adbd8; background:#111; }

/**** ~~ sticky navigation ~~ ****/


/*colum 1 */	
.home-col1 {margin: 0 0 0 0; padding: 0px; width: 650px; height:250px; float:left; display:inline;}
.home-col2 {margin: 0 0 0 0; padding: 0px; width: 650px; height:250px; float:left;}
.home-col1 h2{0;font-size: 26px;; font-family: Verdana, Geneva, sans-serif, "微軟正黑體"; font-weight: normal; color:#333;}
.home-col3 {margin: auto; padding: 0; float:left; height:225px;}
.home-col3 h2{font-size: 26px;; font-family: Verdana, Geneva, sans-serif, "微軟正黑體"; font-weight: normal; color:#333;}
.home-col4 {margin: auto; padding: 0; float:left;}
.home-col4 h2{font-size: 26px;; font-family: Verdana, Geneva, sans-serif, "微軟正黑體"; font-weight: normal; color:#333;}
.swipe { padding-bottom:20px; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; width:600px;}
.swipe li div, .swipe div div div {margin:0 16px 0 4px; width:100px; height:100px; background: none; color:#333; font-size:10px; text-align:center;  display: inline-block;}
.swipe li div p, .swipe div div div p{ margin-top:2px; font-size:12px;}
.more a{ padding:10px 20px; color:#45443d; float:right; margin-right:20px; font-family: "BenchNine", "PT Sans Narrow", "Segoe UI", Arial, Helvetica, sans-serif; font-size:16px; font-weight: normal; letter-spacing:1px;}
.more a:hover{ color:#999;}


.swipe div div div .koma{
	width:100px;
	border:#999 1px solid; background-image:url(../load/thumbnails/1.jpg) ;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	
}

.swipe div div div .koma2{
	width:100px;
	border:#999 1px solid; background-image:url(../load/thumbnails/2.jpg) ;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.swipe div div div .koma3{
	width:100px;
	border:#999 1px solid; background-image:url(../load/thumbnails/3.jpg) ;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.swipe div div div .koma4{
	width:100px;
	border:#999 1px solid; background-image:url(../load/thumbnails/4.jpg) ;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.newslist{
	height:50px;
	width:190px;
	margin-left:-20px;
	padding-left:20px;
	padding-top:5px;
	padding-right:10px;
	font-size:12px;
	background-color:#e6e6e6;
}
.newslist2{
	height:50px;
	width:190px;
	margin-left:-20px;
	padding-left:20px;
	padding-top:5px;
	padding-right:10px;
	font-size:12px;
	background-color:#f1f1f1;
}
.commercial{
	height:80px;
	width:190px;
	margin-left:-20px;
	padding-left:20px;
	padding-top:5px;
	padding-right:10px;
	background-image:url(../load/thumbnails/8.jpg);
	cursor:pointer
}
.commercial2{
	height:80px;
	width:190px;
	margin-left:-20px;
	padding-left:20px;
	padding-top:5px;
	padding-right:10px;
	background-image:url(../load/thumbnails/9.jpg);
	cursor:pointer;
}
.commercial3{
	height:80px;
	width:190px;
	margin-left:-20px;
	padding-left:20px;
	padding-top:5px;
	padding-right:10px;
	background-image:url(../load/thumbnails/5.jpg);
	cursor:pointer;
}
.fakeblog{
	height:80px;
	width:190px;
}

/*-----    scrollup ------*/	
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left:90%;
	
}
#back-top a {
	width: 30px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	opacity:1;
	filter:alpha(opacity=100); 
	color: #333;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #0abab5;
	opacity:0.7;
	filter:alpha(opacity=70); 
}
/* arrow icon (span tag) */
#back-top span {
	width: 30px;
	height: 30px;
	display: block;
	margin-bottom: 7px;
	background: url(../images/scrollup.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #6adbd8;
}
/*********** counter  **************/

.stat-count {
	font-size: 16px;
	font-weight: normal;
	letter-spacing: -0.02em;
	overflow:hidden;
	font-family:"Georgia", Courier, monospace;
	background:#336699;
	text-align:center;
	color:#dbf5f3;
	padding:5px 5px;
	width:30px;
	margin-right:3px;
}
/*********** arrow **************/
div.arrow-left{
	width:16px;
	background-image:url(../images/arrow_left.png);
	height:50px;
	cursor:pointer;
	display:inline;
	float:left;
	background-size:cover

}
div.arrow-left:hover{
	cursor:pointer;
	background-image:url(../images/arrow_left_over.png);
}
div.arrow-right{
	width:16px;
	background-image:url(../images/arrow_right.png);
	height:50px;
	cursor:pointer;
	display:inline;
	float:right;
	background-size:cover
}
div.arrow-right:hover{
	cursor:pointer;
	background-image:url(../images/arrow_right_over.png);
}
/*********** more **************/
.more a{ 
	padding:10px 20px; 
	color:#333;
	float:right; 
	margin-right:20px; 
	font-family: Verdana, Geneva, sans-serif, "微軟正黑體";
	font-size:15px; 
	font-weight: normal; 
	letter-spacing:1px;
	margin-top:20px;
	}
.more a:hover{ color:#999;}